<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import OverviewBox from "./OverviewBox.vue";
import { computed, ref, reactive } from "vue";
import { useUserStore } from "../../../utils/store/store";
import { userType } from "../../../utils/ts/user";
import { PlusOutlined } from "@ant-design/icons-vue";

const store = useUserStore();
const userData = computed<userType | null>(() => store.getUser());

const money = ref(100);
const payMethod = ref(1);

interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: "账户名称：徐州XXX有限公司",
  },
  {
    title: "银行账号：123123123123123",
  },
  {
    title: "开户银行：招商银行股份有限公司徐州创维大厦支行",
  },
  {
    title: "汇款备注：会员ID 33701",
  },
];

const formState = reactive({
  bal: "",
  name: "",
  account: "",
  bank: "",
  receipt: "",
  screenShot: "",
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};


</script>
<template>
  <div class="pr-5 pl-5 overflow-hidden">
    <ProductBox title="充值">
      <ul class="flex flex-col tip">
        <li>
          充值最小金额
          <span class="color-red-600">100.00</span>
          元，充值金额必须为整数
        </li>
        <li class="leading-5">
          支付过程中浏览器会有几次跳转，支付完成之前请勿关闭浏览器，否则可能造成支付失败
        </li>
        <li>
          如充值后款项没有到账，请
          <router-link to="/service/complain">
            <span class="color-indigo-600 cursor-pointer">
              提交工单
            </span>
          </router-link>
        </li>
        <li>充值款项用于平台消费，不可退款，充值前请妥善规划资金用途</li>
      </ul>

      <OverviewBox title="账户余额" class="mt-5" :title-style="{ fontSize: '1.25rem' }">
        <template #icon>
          <img src="/console/money.png" alt="" class="h-5 w-5" />
        </template>
        <template #content>
          <div class="flex items-end mt-6">
            <span class="text-3xl font-bold text-yellow-500 leading-none">
              {{ userData?.bal }}
            </span>
            <span class="leading-6">元</span>
            <router-link to="/finance/chargeRecord" class="color-blue-600 ml-6 leading-6">
              充值记录
            </router-link>
          </div>

          <div class="flex flex-wrap">
            <OverviewBox class="pl-0 flex-1" title="线下汇款" :title-style="{ fontSize: '1.25rem' }">
              <template #icon>
                <img src="/console/transfer.png" alt="" class="h-5 w-5" />
              </template>
              <template #content>
                <div class="mt-10">
                  <a-timeline>
                    <a-timeline-item>
                      <p>汇款至银行账户</p>
                      <div class="flex-col">
                        <a-list item-layout="horizontal" :data-source="data" class="bg-white">
                          <template #renderItem="{ item }">
                            <a-list-item>
                              <a-list-item-meta>
                                <template #title>
                                  <a>
                                    {{ item.title }}
                                  </a>
                                </template>
                              </a-list-item-meta>
                            </a-list-item>
                          </template>
                        </a-list>
                      </div>
                    </a-timeline-item>
                    <a-timeline-item>
                      <p>填写充值结果反馈</p>
                      <a-form :model="formState" name="basic" :labelWrap="true" :label-col="{ span: 3 }"
                        :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                        <a-form-item label="汇款金额" name="bal" :rules="[
                          {
                            required: true,
                            message: '请输入汇款金额!',
                          },
                        ]">
                          <a-input v-model:value="formState.bal" />
                        </a-form-item>
                        <a-form-item label="汇款户名" name="bal" :rules="[
                          {
                            required: true,
                            message: '请输入汇款户名!',
                          },
                        ]">
                          <a-input v-model:value="formState.name" />
                        </a-form-item>
                        <a-form-item label="汇款账号" name="bal" :rules="[
                          {
                            required: true,
                            message: '请输入汇款账号!',
                          },
                        ]">
                          <a-input v-model:value="formState.account" />
                        </a-form-item>
                        <a-form-item label="汇款银行" name="bal" :rules="[
                          {
                            required: true,
                            message: '请输入汇款银行!',
                          },
                        ]">
                          <a-input v-model:value="formState.bank" />
                        </a-form-item>
                        <a-form-item label="交易号" name="bal" :rules="[
                          {
                            required: true,
                            message: '请输入交易号!',
                          },
                        ]">
                          <a-input v-model:value="formState.receipt" />
                        </a-form-item>

                        <a-form-item label="汇款凭证">
                          <a-upload action="/upload.do" list-type="picture-card">
                            <div>
                              <PlusOutlined />
                              <div style="margin-top: 8px">上传</div>
                            </div>
                          </a-upload>
                        </a-form-item>

                        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                          <a-button type="primary" html-type="submit">
                            提交
                          </a-button>
                        </a-form-item>
                      </a-form>
                    </a-timeline-item>
                    <a-timeline-item>管理审核并完成充值</a-timeline-item>
                  </a-timeline>
                </div>
              </template>
            </OverviewBox>
            <OverviewBox class="pl-0 flex-1" title="在线充值" :title-style="{ fontSize: '1.25rem' }">
              <template #icon>
                <img src="/console/icon_recharge.png" alt="" class="h-5 w-5" />
              </template>
              <template #content>
                <p class="mt-10 ">
                  充值金额：
                </p>
                <p class="pl-5 flex items-center mb-10">
                  <a-input-number id="inputNumber" v-model:value="money" :min="100" />
                  <span class="ml-2">元</span>
                </p>
                <p>
                  充值方式：
                </p>
                <p class="flex items-center">
                  <a-radio-group v-model:value="payMethod" size="large" class="flex items-center">
                    <a-radio :value="1" class="mr-10 h-20 min-w-28">
                      <div class="flex flex-col items-center">
                        <img src="/console/wx.png" alt="" class="h-15 w-15" />
                        <span class="w-20 text-center">微信支付</span>
                      </div>
                    </a-radio>
                    <a-radio :value="2" class="min-w-28 ml-5">
                      <div class="flex flex-col items-center">
                        <img src="/console/ali.png" alt="" class="h-15 w-15" />
                        <span class="w-20 text-center">支付宝支付</span>
                      </div>
                    </a-radio>
                  </a-radio-group>
                </p>

                <p class="pl-40 pt-5">
                  <a-button type="primary">充值</a-button>
                </p>
              </template>
            </OverviewBox>
          </div>
        </template>
      </OverviewBox>
    </ProductBox>
  </div>
</template>

<style>
.ant-col {
  max-width: none;
  flex-basis: auto;
  flex-shrink: 0;
}
</style>
<style lang="scss" scoped>
.tip {
  background-color: #ffd47f;
  padding: 1rem 1rem 0.75rem 2rem;

  li {
    color: #333333;
    margin-bottom: 0.75rem;
    font-weight: bold;
    font-size: 0.9rem;
    list-style: disc;
  }

  li:last-child {
    margin-bottom: 0;
  }
}
</style>
